<template>
    <v-container style="height: 100vh; padding: 0;margin: 0;" fluid >
        <v-img src="/images/bg.jpg" style="height: 100%">
            <v-row  style="height: 100%; padding: 0;margin: 0;">
                <v-col class="white--text d-none d-md-flex flex-column justify-content-center pa-8" style="background-color: rgba(75,85,99,.8)" :lg="4" >
                    <div class="flex-grow-1 d-flex flex-column  d-flex align-items-center pt-8 w-100">
                        <h1 class="my-4">{{app_name}}</h1>
                        <p class="mr-4">一站式金融获客平台。值得信赖！</p>
                    </div>
                    <div>
                        <p>copyright &copy; {{year}}</p>
                    </div>
                </v-col>
                <v-col  class="white d-flex flex-column align-items-center" :lg="8">
                    <div class="flex-grow-1 d-flex flex-column justify-content-center ">
                            <v-row align-content="center" justify="center">
                                <h3 class="text-center white col-12 mt-n8">
                                     <v-img src="/images/logo.jpg" width="150" style="display:inline-block"></v-img>
                                </h3>
                                <v-tabs class="col-sm-8 col-lg-4 col-xl-4" >
                                    <v-tab>密码登录</v-tab>
                                    <v-tab>验证码登录</v-tab>
                                    <v-tab-item :transition="false">
                                        <v-card class="mt-2" flat>
                                            <v-form ref="form"  @keyup.native.enter="doLogin">
                                                <v-text-field
                                                    label="手机号码"
                                                    v-model="mobile"
                                                    :rules="[rules.required]"
                                                    type="text">
                                                </v-text-field>
                                                <v-text-field
                                                    id="password"
                                                    v-model="password"
                                                    label="密码"
                                                    :rules="[rules.required]"
                                                    @click:append="showPassword = !showPassword"
                                                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                                                    :type="showPassword ? 'text' : 'password'"
                                                ></v-text-field>
                                            </v-form>
                                            <v-card-actions>
                                                <v-spacer></v-spacer>
                                                <v-btn color="primary" :loading="loading" @click="doLogin()">登录</v-btn>
                                            </v-card-actions>
                                        </v-card>
                                    </v-tab-item>
                                    <v-tab-item :transition="false">
                                        <v-card class="mt-2" flat>
                                            <v-form ref="formBySms"  @keyup.native.enter="doLoginSms">
                                                <v-text-field
                                                    label="手机号码"
                                                    v-model="mobile"
                                                    :rules="[rules.required]"
                                                    type="text">
                                                </v-text-field>
                                                <v-text-field
                                                    id="smscode"
                                                    v-model="sms_code"
                                                    label="验证码"
                                                    type="password"
                                                    :rules="[rules.required]"
                                                >
                                                    <template v-slot:append>
                                                        <span v-if="count_down == 0"  class="poiner" style="font-size:14px;"  @click="sendSms"> 发送短信 </span>
                                                        <span v-if="count_down > 0" style="font-size:14px;" > {{count_down}} 秒 </span>
                                                    </template>
                                                </v-text-field>
                                            </v-form>
                                            <v-card-actions>
                                                <v-spacer></v-spacer>
                                                <v-btn color="primary" :loading="loading" @click="doLoginSms()">登录</v-btn>
                                            </v-card-actions>
                                        </v-card>
                                    </v-tab-item>
                                </v-tabs>
                            </v-row>
                        </div>
                </v-col>
          </v-row>
        </v-img>
    </v-container>
</template>

<script>
    import axios from "axios";

    export default {
        data: () => ({
            app_name: '',
            mobile: '',
            password: '',
            showPassword: false,
            sms_code: '',
            loading: false,
            rules: {
              required: value => !!value || '必填',
            },
            count_down: 0
        }),

        computed: {
            year: function () {
                return new Date().getFullYear ()
            }
        },
        created() {
            this.loadQr()
        },
        methods: {
            loadQr() {
                axios.get(`/v1/home`).then((response) => {
                    this.qr_code = response.data.data.qr_code;
                    this.app_name = response.data.data.app_name;
                })
                    .catch(function () {})
                    .then(function () {});
            },
            sendSms() {
                if(this.mobile.length <= 0) {
                        this.$toast.open({
                            message: "手机号码不正确",
                            type: 'error',
                            position: 'top-right',
                        });
                    return;
                }
                const that = this;
                axios.post("/login/send-sms", {
                    mobile: this.mobile,
                }).then((response) => {
                    if (response.data.code == 0) {
                        that.count_down = 60;
                        that.countDown();
                    } else {
                        this.$toast.open({
                            message: response.data.msg,
                            type: 'error',
                            position: 'top-right',
                        });
                    }
                }).catch(function () {})
                .then(function () {
                });
            },

            countDown() {
                const that = this;
                setTimeout(function(){
                    that.count_down--;
                    if(that.count_down>0) {
                        that.countDown();
                    }
                }, 1000)
            },

            doLoginSms() {
               if (!this.$refs.formBySms.validate()) {
                  return;
                }

                const that = this;
                that.loading = true;
                axios.post("/login/by-sms", {
                    mobile: this.mobile,
                    sms_code: this.sms_code,
                }).then((response) => {
                    if (response.data.code == 0) {
                    that.$store.dispatch("user", response.data.data);
                    that.$store.dispatch("token", response.data.data.token);
                    that.$router.replace({ path: `/` });
                        this.$toast.open({
                            message: '登录成功',
                            type: 'success',
                            position: 'top-right',
                        });
                    } else {
                        this.$toast.open({
                            message: response.data.msg,
                            type: 'error',
                            position: 'top-right',
                        });
                    }
                }).catch(function () {})
                .then(function () {
                    that.loading = false;
                });
            },

            doLogin() {
              if (!this.$refs.form.validate()) {
                  return;
              }
              const that = this;
              that.loading = true;
              axios.post("/login", {
                  mobile: this.mobile,
                  password: this.password,
              }).then((response) => {
                if (response.data.code == 0) {
                  that.$store.dispatch("user", response.data.data);
                  that.$store.dispatch("token", response.data.data.token);
                  that.$router.replace({ path: `/` });
                  this.$toast.open({
                      message: '登录成功',
                      type: 'success',
                      position: 'top-right',
                  });
                } else {
                  this.$toast.open({
                      message: response.data.msg,
                      type: 'error',
                      position: 'top-right',
                  });
                }
              }).catch(function () {})
              .then(function () {
                  that.loading = false;
              });
            },
        }
    }
</script>

<style scoped>
.poiner {
    cursor: pointer;
}
</style>
